
### Class Architecture

| Type      | Class Name                 | Description                                                                                                                                            |
| --------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ==Block== | `.as-page`                 | The top-level container for all unique page content. It serves as the primary wrapper for everything injected between the header and footer.           |
| Element   | `__content`                | The core structural element that holds the actual page data (text, images, or components). It ensures consistent inner spacing and alignment.          |
| Modifier  | `__content--media-archive` | A specific style variation for the content area when displaying historical records, video archives, or past broadcast lists.                           |
| Modifier  | `__content--media-stream`  | A modifier used to optimize the layout for live video playback or audio streaming views, often involving darker backgrounds or specific aspect ratios. |
| Modifier  | `__content--media-program` | A variation designed for scheduling and programming layouts, typically used to style broadcast timetables or event calendars.                          |
| Element   | `__loading`                | A dedicated element used to display progress indicators, skeletons, or spinners while the CMS is fetching page data.                                   |
| Element   | `__page-not-found`         | A specialized element for 404 error states, providing a structured area for "not found" messages and redirect links.                                   |

### Implementation Reference

##### Generated HTML

```html
<!DOCTYPE html>  
<html lang="@Language" class="as-html">  
  
<head>  
    <meta charset="utf-8"/>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
    <base href="/"/>  
</head>  
  
<body class="as-body">  
<div class="as-routes">  
	...
</div>  
  
</html>
```

##### SCSS

```scss
.as-html {  
  height: 100% !important;  
}  
  
.as-body {  
  height: 100% !important;  
}  
  
.as-routes {  
  height: 100% !important;  
  display: flex !important;  
  flex-direction: column !important;  
}
```

